<!-- hooks编程 函数编程-->
<script setup>
import {ref,computed, onMounted,onUpdated,onUnmounted} from 'vue'
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore=useNightModeStore();

let date = ref(0);//日期
let month = ref(0);//月份
let hours=ref(0);//时间上午好下午好晚上好

//获取月份
onMounted(()=>{
    let dateO = new Date();
 month.value = dateO.getMonth();//月份
 date.value = dateO.getDate();//日期
 hours.value=dateO.getHours();//当前上午下午晚上
});
let chineseMonth = computed(() => {
    //定义中文数组
    let chineseMonths = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
    return chineseMonths[month.value];
});
</script>

<template>
    <div class="r">
        
    <div :class="['tophead',nightModeStore.isNight?'night':'']">
        <div class="left">
            <div class="date">
                <span>{{ date }}</span>
                <span>{{chineseMonth}}月</span>
            </div>
            <div class="line"></div>
            <div v-if="hours>5 && hours<12" class="sayhello">上午好！</div>
            <div v-else-if="hours>11 && hours<=18" class="sayhello">下午好！</div>
            <div v-else class="sayhello">晚上好！</div>
        </div>
       

        <!-- 头像 -->
        <div class="headimg">
            <RouterLink to="/userset">
                <img src="../assets/morentouxiang_1.png" >
                </RouterLink>
        </div>

    </div>
    </div>

</template>
<style scoped>
.r{
    background-color: black;
}
.tophead {
    background-color: #fff;
    display: flex;
    padding: 6px 30px 6px;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px 20px 0 0;

}
.tophead.night{
    background-color: #555;
    color: white;
}

.date {
    padding: 0px 30px;
}

.left {
    display: flex;
}

.line {
    border-left: 1px solid #ddd;
    height: 40px;
    padding-right: 20px;
}

.date span {
    display: block;
    text-align: center;

}

.date span:first-child {
    font-size: 16px;
    font-weight: bold;
}

.date span:last-child {
    font-style: 14px;
}

.sayhello {
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
}

.headimg {
    width: 40px;
    height: 40px;
    float: right;
    border-radius: 50%;
}
.headimg img{
    width: 40px;
    height: 40px;
}

</style>